<template>
	<div class="container">
		<el-page-header @back="goBack" content="新闻公告列表"></el-page-header>
		<el-row type="flex" justify="space-around"   class="nav-bar" style="min-width: 1300px;">
			<el-col :span="2">
				<el-button type="primary" @click="create" icon="el-icon-plus">添加公告</el-button>
			</el-col>
			<el-col  :span="8">
				<el-button type="danger" class="e-m-l-15" plain @click="delSelectData" icon="el-icon-delete">批量删除</el-button>
			</el-col>
			<el-col class="text-right" >
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item label="分类" prop="region">
					    <el-select v-model="newsTypeId" placeholder="请选择分类">
					      <el-option v-for="(item,index) in newsTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
					    </el-select>
					  </el-form-item>
					  
					  <el-form-item label="状态" prop="region">
					      <el-select v-model="newsStateId" placeholder="请选择分类">
					        <el-option v-for="(item,index) in newsStateList" :key="index" :label="item.name" :value="item.id"></el-option>
					      </el-select>
					    </el-form-item>
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-table :data="tableData" style="width: 100%"
		 :default-sort = "{prop: 'date', order: 'descending'}"
		 @sort-change="sortTablefun"
		 stripe @selection-change="handleSelectionChange">
			<el-table-column
                fixed
                type="selection"
                width="55">
            </el-table-column>
			<el-table-column fixed prop="title" label="标题">
				<template slot-scope="scope">
					 <span>{{scope.row.title}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="noticetype" label="公告分类" width="150">
				<template slot-scope="scope">
					 <span>{{scope.row.noticetype.name}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="创建时间" width="200">
			</el-table-column>
			<!-- <el-table-column prop="orderby" label="排序"
			 sortable="custom"
			width="100">
			</el-table-column> -->
			<el-table-column prop="state" label="是否显示" width="150">
				<template slot-scope="scope">
					<span class="color-danger" v-if="scope.row.ishide">隐藏</span>
					<span class="color-success" v-else>显示</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="state" label="状态" width="150">
				<template slot-scope="scope">
					<span class="color-danger" v-if="scope.row.state == '未审核'">{{ scope.row.state }}</span>
					<span class="color-success" v-else>{{ scope.row.state }}</span>
				</template>
			</el-table-column> -->
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row.id)" type="text" size="small">修改</el-button>
					<el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
					<!-- <el-button type="text" size="small">审核</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>

	export default {
		layout: 'admin',
		head() {
			return {
				title: '新闻公告列表-' + this.websetting.name
			}
		},
		data() {
			return {
				key: '',
				page: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				multipleSelection: [],
				newsTypeList: [],
				newsTypeId:0,
				newsStateId:0,
				newsStateList:[
					{
					     "id": 0,
					     "name": "全部"
					   },
					 {
					      "id": 1,
					      "name": "显示"
					    },
					    {
					      "id": 2,
					      "name": "隐藏"
					    }
					
				],
				order:[
					
				]
			}
		},
		mounted() {
			this.getTypeList()
			this.getList()
			// this.getstateList()
		},
		methods: {
			sortTablefun(a){
				if(a.order == "ascending"){
					this.order = [
						{
							column: "OrderBy",
							isDesc:true,
							
						}
					]
					this.getList()
				}else if(a.order == "descending"){
					this.order = [
						{
							column: "OrderBy",
							isDesc:false,
							
						},
						
					]
					this.getList()
				}else{
					this.order = []
					this.getList()
				}
			},
			goBack() {
				this.$router.go(-1)
			},
			getTypeList() {
				this.$axios.post('/Admin/NoticeType/List', {
					"PageIndex": 1,
					"PageSize": 9999,
					"Key": ''
				}).then((res) => {
					this.newsTypeList = res.rows;
					this.newsTypeList.unshift({id:0,name:"全部"})
				})
			},
			getstateList() {
				this.$axios.post('/Select/Menus?name=HideState', {
					"PageIndex": 1,
					"PageSize": 9999,
					"Key": ''
				}).then((res) => {
					this.newsStateList = res;
					this.newsStateList.unshift({id:0,name:"全部"})
				})
			},
			getList() {
				this.$axios.post('//Notice/list', {
					"PageIndex": this.page,
					"PageSize": this.pageSize,
					"Key": this.key,
					"TypeId":this.newsTypeId,
					"IsHide":this.newsStateId,
					"order": this.order
				}).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
				})
			},
			create() {
				this.$router.push({
					path:'/notice/create/'
				})
			},
			edit(id) {
				this.$router.push({
					path:'/notice/edit/?id=' + id
				})
			},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			del(id) {
				return new Promise((resolve, reject)=>{
					this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						if(id.length != 0){
							this.$axios.post('//Notice/delete?Ids=' + id).then((res) => {
								this.$message.success(res.msg);
								this.getList()
								resolve()
							})
						}else{
							this.$message({
								type: 'warning',
								message: '请选择删除数据'
							});
						}
						
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				})
				
			},
			handleSelectionChange(arr) {
				this.multipleSelection = []
				arr.forEach((item,index)=>{
					this.multipleSelection.push(arr[index].id)
				})
				console.log(this.multipleSelection)
			},
			delSelectData(){
				this.del(this.multipleSelection).then(()=>{
					this.page = 1;
					this.getList()
				})
			}
		}
	}
</script>

<style lang="scss">
	.scope-state{
		cursor: pointer;
		&:hover{
			color: #d0171e;
		}
	}
	.nav-bar {
		padding: 45px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
</style>
